import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  TouchableOpacity,
  TouchableHighlight,
} from 'react-native';
import {Icon,} from 'react-native-elements';
import playbackHelper from './playbackHelper.js';
import globalStyles from './StyleSheet.js';



/*MiniAudio player can be used in any component just by using the MiniAudioPlayer tag. 
Can be a self closing tag.
Eg. <MiniAudioPlayer/> 

The player will automatically synchronize with the music variable that is available globally.

Note: Flex direction of the view containing the MiniAudioPlayer should be 'column' and it should 
occupy the entire width of the screen.*/

export default class MiniAudioPlayer extends Component {
  
  componentWillMount()
  {
      // super();
      
      var playButtonIcon;
      if(global.playbackObject.isPlaying)
      {
        playButtonIcon = 'pause';
      }else{
        playButtonIcon = 'play-arrow'
      }
      this.setState({
        playPauseButton: playButtonIcon,
      });
  }

  componentDidMount() {
      this.interval = setInterval(() => this.updateSongChange(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }


  updateSongChange()
  {
    var playButtonIcon;
    if(global.playbackObject.isPlaying)
    {
      playButtonIcon = 'pause';
    }else{
      playButtonIcon = 'play-arrow'
    }

    this.setState({
      playPauseButton: playButtonIcon,   
    });

    // console.log('Currently playing',this.state.durationInMinutes, this.state.durationInMinutes);
  }

	render() {
    if(typeof global.music=== "undefined")
    {
      return (
        <View style={styles.transparentPanel}>
        </View>
        )
    }else
    {
  		return (
            <TouchableOpacity onPress={this.props.onPress} style={styles.mainPanel}>
              <View style={styles.mainPanel}>
  	          <View style={styles.trackInfoPanel}>
  	            <Text style={styles.miniTrackNameText}>{global.playbackObject.currentSongName}</Text>
  	            <Text style={styles.miniPlaylistNameText}>{global.playbackObject.currentPlaylistName}</Text>
  	          </View>

  	          <View style={styles.playerControlsPanel}>
  	            <TouchableOpacity style={styles.playerControlIcons} onPress={() => {playbackHelper.setCurrentTime(-10)}}>
  	              <Icon name='fast-rewind' color='#fff'/>
  	            </TouchableOpacity>
  	            <TouchableOpacity style={styles.playerControlIcons} onPress={() => {playbackHelper.togglePlayPause()}}>
  	              <Icon name={this.state.playPauseButton} color='#fff'/>
  	            </TouchableOpacity>
  	            <TouchableOpacity style={styles.playerControlIcons} onPress={() => {playbackHelper.setCurrentTime(10)}}>
  	            <Icon name='fast-forward' color='#fff'/>
  	            </TouchableOpacity>
  	          </View>
              </View>
            </TouchableOpacity>

  			)
   }
	}
}

const styles = StyleSheet.create({
  miniPlayerPanel: {
    flex: 3,
    backgroundColor: '#252525',
    flexDirection : 'row',
  },
  trackInfoPanel: {
    flex: 3,
    flexDirection : 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  miniTrackNameText:{
    color: '#DDDDDD',
    textAlign: 'left',
    fontSize: 20,
  },
  miniPlaylistNameText:{
    color: '#8E8E93',
    textAlign: 'left',
  },
  playerControlsPanel: {
    flex: 3,
    flexDirection : 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  playerControlIcons: {
    paddingHorizontal: 10,
  },
  mainPanel: {
    flexDirection : 'row',
    backgroundColor: '#252525',
    flex: 1,
  },
  notLoadedText:{
    color: '#fff',
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
  transparentPanel: {
    height: 0
  },
});